Установка скрипта «Подсказки в поиске по магазину»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт осуществляет поиск по интернет магазину без перезагрузки страницы. Результаты появляются при вводе пользователем поискового запроса. Решение актуально для тех магазинов, которые имеют высокие показатели отказов на странице поиска.

    Скрипт имеет настройки:
  • отслеживание целей в метрике. Узнайте, что ищут и находят ваши пользователи;
  • ограничение на количество найденных результатов;
  • ограничение на минимальную длину запроса для поиска.

Подсказки показываются под формой поиска. При этом функционал самой формы не нарушается и она также работает при нажатии на кнопку "Найти". Т.е. скрипт является расширением для поиска, а не его полной заменой.

Скрипт работает на всех страницах, где размещена форма поиска по магазину.

    Особенности:
  • не требует PHP и устанавливается за 5 минут;
  • для работы скрипта требуется актуальный файл export.xml. При динамичном изменении ассортимента, необходимо периодически выполнять экспорт в XML (это занимает 10 секунд);
  • ограничение на количество товаров, добавленных в магазин: 2500 позиций (протестировано на данный момент). При работе с большим количеством товаров рекомендуется использовать PHP версию скрипта.

Пример:



    Требования к установке:
  • модуль интернет-магазин;
  • валидный файл export.xml (Панель управления » Интернет магазин » Экспорт товаров: XML).

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.
Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в папку js и загрузите в эту папку файл "um.shopSearchHelp.js" из архива со скриптом (папка "скрипты").

Второй шаг: установка кода

Перейдите в панель управления и выберите в главном меню Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Нижняя часть сайта:

Добавьте код в самый конец шаблона: 

<script src="/js/um.shopSearchHelp.js"></script>
<script>
	$('input[name="query"]').keyup(function(){
		um.searchProducts($(this).val(), {
			yaMetrika: 'yaCounterXXXXXXXX.reachGoal(\'YYYYYY\', {\'Запрос: \''+$(this).val()+'\', \'Результат:\': $(this).text()});',
			numResults: 0,
			minChar: 3
		});
	});
</script>
    Где:
  • yaMetrika - подключение целей Яндекс.Метрики. Удалите строку, если не хотите ее использовать.
    • XXXXXXXX - код счетчика в Яндекс.Метрике;
    • YYYYYY - название цели в Яндекс.Метрике;
  • numResults: 0 - количество результатов поиска (по умолчанию: 0 - без ограничений);
  • minChar: 3 - минимальное количество символов по которым будет осуществляться поиск (по умолчанию: 3).

Пример:

Нажмите "Сохранить".

Если у вас нет такого шаблона, создайте глобальный блок и вставьте в него код, а затем разместите этот глобальный блок во всех шаблонах модуля "Интернет магазин" перед тегом </body>.

Третий шаг: установка стилей

Скрипт добавляет после формы поиска список с найденными результатами. Списку присваивается id="search-results". Чтобы разместить стили для этого списка, перейдите в панель управления и в главном меню выберите Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Таблица стилей (CSS) в разделе интернет магазина:

В шаблон добавьте следующие стили: 

#search-results {
	position: absolute;
	background: white;
	box-shadow: 2px 1px 3px #333;
	border: 1px solid #ccc;
	list-style-type: none;
	padding: 0px;
	max-height: 300px;
	overflow: auto;
	z-index: 1;
	margin-top: 45px;
	width: 450px;
}
#search-results li {
	border-bottom: 1px dotted #ccc;
}
#search-results li a {
	display: block;
	padding: 10px 5px;
}
#search-results li a img {
	width: 30px;
	margin-right: 10px;
	float: left;
}

Пример:

Нажмите "Сохранить".

    Информация о классах:
  • #search-results – весь блок с результатами поиска;
    • #search-results li – результат поиска (товар);
    • #search-results li a – ссылка в результате поиска;
    • #search-results li a img – изображение товара в результатах поиска;

Четвёртый шаг: настройка и использование

Для отслеживания целей в Яндекс.Метрике необходимо добавить новую цель. Ее название указывается в интерфейсе Метрики и в поле yaMetrika скрипта на шаге 2. Посмотрите подробную инструкцию по настройке и отслеживанию целей.

Используйте следующие настройки при создании новой цели:

Скрипт отлично работает с шаблоном LeBoutique (ссылка на uTemplate.pro). Данный шаблон содержит все стили для настройки внешнего вида результатов поиска:



Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.